<template>
    <div class="w-full bg-#fff box-border p-16px rounded-4px shadow">
        <n-collapse>
            <n-collapse-item :title="`编号-${item.id}`">
                <template #header-extra>
                    {{ new Date(item.createdTime).toLocaleString() }}
                </template>
                <div
                    class="w-full flex gap-10px"
                    @contextmenu="handleContextMenu"
                >
                    <n-list class="w-50%" hoverable>
                        <n-list-item>
                            <n-thing :title-extra="item.customerInfo.account">
                                <template #header>
                                    <div class="wh-100% flex-center gap-4px">
                                        <PersonCircle class="wh-20px" />
                                        <span>注册账号</span>
                                    </div>
                                </template>
                            </n-thing>
                        </n-list-item>
                        <n-list-item>
                            <n-thing :title-extra="item.customerInfo.username">
                                <template #header>
                                    <div class="wh-100% flex-center gap-4px">
                                        <AtCircle class="wh-20px" />
                                        <span>客户昵称</span>
                                    </div>
                                </template>
                            </n-thing>
                        </n-list-item>
                    </n-list>
                    <n-list class="w-50%" hoverable>
                        <n-list-item>
                            <n-thing :title-extra="item.customerInfo.phone">
                                <template #header>
                                    <div class="wh-100% flex-center gap-4px">
                                        <PhonePortrait class="wh-20px" />
                                        <span>联系电话</span>
                                    </div>
                                </template>
                            </n-thing>
                        </n-list-item>
                        <n-list-item>
                            <n-thing
                                title="客户公司"
                                :title-extra="item.customerInfo.companyName"
                            >
                                <template #header>
                                    <div class="wh-100% flex-center gap-4px">
                                        <IdCard class="wh-20px" />
                                        <span>公司名称</span>
                                    </div>
                                </template>
                            </n-thing>
                        </n-list-item>
                    </n-list>
                </div>
            </n-collapse-item>
        </n-collapse>
        <n-dropdown
            placement="bottom-start"
            trigger="manual"
            :x="xPos"
            :y="yPos"
            :options="approvalActions"
            :show="showDropdown"
            :on-clickoutside="clickDropdownOutside"
            @select="handleDropdownSelect"
        />
    </div>
</template>

<script lang="ts" setup>
import { ref, h } from "vue";
import type { Component } from "vue";
import { NIcon, NInput } from "naive-ui";
import {
    PersonCircle,
    AtCircle,
    PhonePortrait,
    IdCard,
    CheckmarkCircleOutline,
    CloseCircleOutline,
} from "@vicons/ionicons5";
import type { CustomerApproval } from "@/service/api/types/user";

const emits = defineEmits<{
    (e: "audit:success", id: string): void;
    (e: "audit:fail", id: string, comment: string): void;
}>();

const props = defineProps<{
    item: CustomerApproval;
}>();

const xPos = ref<number>(0);
const yPos = ref<number>(0);
const showDropdown = ref<boolean>(false);

const rejectComments = ref("");

function renderIcon(icon: Component) {
    return () => {
        return h(
            NIcon,
            { size: 20 },
            {
                default: () => h(icon),
            }
        );
    };
}

const approvalActions = [
    {
        label: "通过",
        key: "approve",
        icon: renderIcon(CheckmarkCircleOutline),
    },
    {
        label: "拒绝",
        key: "reject",
        icon: renderIcon(CloseCircleOutline),
    },
];

const handleContextMenu = (e: MouseEvent) => {
    e.preventDefault();
    xPos.value = e.clientX;
    yPos.value = e.clientY;
    showDropdown.value = true;
};

const clickDropdownOutside = () => {
    showDropdown.value = false;
    rejectComments.value = "";
};

const handleDropdownSelect = (value: string) => {
    showDropdown.value = false;
    if (value === "approve") {
        window.NDialog.info({
            title: "通过申请",
            content: "是否通过该客户注册申请?",
            closable: false,
            positiveText: "确定",
            negativeText: "取消",
            onPositiveClick: () => {
                emits("audit:success", props.item.id);
            },
        });
    } else {
        window.NDialog.error({
            title: "拒绝申请",
            content: () => {
                return h(
                    "div",
                    {
                        class: "wh-100%",
                    },
                    [
                        h(NInput, {
                            value: rejectComments.value,
                            onInput: (newValue: string) => {
                                rejectComments.value = newValue;
                            },
                            type: "textarea",
                            class: "w-full",
                            showCount: true,
                            maxlength: 50,
                            placeholder: "拒绝理由",
                        }),
                    ]
                );
            },
            closable: false,
            positiveText: "确定",
            negativeText: "取消",
            onPositiveClick: () => {
                if (rejectComments.value.length === 0) {
                    window.NMessage.error("请输入拒绝理由");
                    return false;
                }
                emits("audit:fail", props.item.id, rejectComments.value);
            },
        });
    }
};
</script>

<style scoped></style>
